<template>
	<view class="wrap h-full  " style="margin: 0 auto;width: 600rpx;">
		<view class="content  flexflex flex-column flex-align ">
			<u-gap height="20"></u-gap>
			<view class="qr-box">
				<canvas id="qrbox" style="width: 200px;height:200px;" canvas-id="qrcode" v-show="qrShow" />
			</view>
			<view class="text-center uni-text-gray mt10">
				就诊时出示此二维码
			</view>
			<view class="mt30" style="width: 600rpx;">
				<u-row>
					<u-col>
						<view class="flexflex justif-between mt10 ms10">
							<view class="">
								姓名
							</view>
							<view class="">
								{{userInfo.username}}
							</view>
						</view>
						<u-line></u-line>
					</u-col>
				</u-row>
				<u-row v-if="false">
					<u-col>
						<view class="flexflex justif-between mt10 ms10">
							<view class="">
								身份证号
							</view>
							<view class="">
								{{userInfo.userid}}
							</view>
						</view>
						<u-line></u-line>
					</u-col>
				</u-row>
				<u-row>
					<u-col>
						<view class="flexflex justif-between mt10 ms10">
							<view class="">
								手机号
							</view>
							<view class="">
								{{secretPass(userInfo.phone)}}
							</view>
						</view>
						<u-line></u-line>
					</u-col>
				</u-row>
				<u-row>
					<u-col>
						<view class="flexflex justif-between mt10 ms10">
							<view class="">
								就诊卡号
							</view>
							<view class="">
								{{userInfo.userid}}
							</view>
						</view>
						<u-line></u-line>
					</u-col>
				</u-row>
			</view>
			<u-gap height="80"></u-gap>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import uQRCode from "@/common/uqrcode.js";
	import utils from "@/utils/utils.js";

	import {
		mapState, //先导入mapState方法
		mapMutations,
		mapActions,
	} from "vuex";
	export default {
		props: [],
		computed: {
			...mapState("m_userInfo", ["qrcode", "userInfo"]),
		},
		data() {
			return {
				qrShow: true,
				img: null,
			};
		},
		onLoad() {},
		onShow() {
			// console.log(this.qrcode, "qrcode");、
			setTimeout(() => {
				console.log("画好了");
				//其他处理逻辑代码
				this.qrFun();
				// console.log(this.qrcode, "qrcode");
			});
		},
		methods: {
			...mapMutations("m_userInfo", ["setQrcode"]),
			// setData(codeImages) {
			// 	return codeImages.replace(/[\r\n]/g, "");
			// },
			secretPass(num) {
				var str = num
				var reg = /^(\d{3})\d+(\d{4})$/;
				str = str.replace(reg, "$1 **** $2");
				return str
			},
			save(filePath =
				'https://img2.baidu.com/it/u=2499112433,1406976051&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500') {
				uni.downloadFile({
					//下载文件资源到本地,返回文件的本地临时路径
					//网络图片路径
					url: 'https://img2.baidu.com/it/u=2499112433,1406976051&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					success: function(res) {
						var imageUrl = res.tempFilePath; //临时文件路径
						uni.saveImageToPhotosAlbum({ //保存图片到系统相册
							filePath: imageUrl,
							success: (res) => {
								uni.showToast({
									title: '成功'
								})
								console.log('图片保存成功');
							},
							fail: (err) => {
								console.log('图片保存失败');
							}
						})
					}
				})
			},
			qrFun(text) {
				let that = this;
				// let phoneNumber = uni.getStorageSync('userInfo')?.uphone;
				// text = phoneNumber;
				this.qrShow = true;
				uQRCode.make({
					canvasId: "qrcode",
					componentInstance: this,
					text: "1313131",
					size: 200,
					margin: 10,
					backgroundColor: "#ffffff",
					foregroundColor: "#000000",
					fileType: "jpg",
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: (res) => {
						that.setQrcode(res);
					},
				});
			},
			/**
			 * 保存图片
			 */
			saveImage() {
				let that = this;
				// 向用户发起授权请求
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						// 已授权
						that.downLoadImg();
					},
					fail: () => {
						// 拒绝授权，获取当前设置
						uni.getSetting({
							success: (result) => {
								if (!result.authSetting['scope.writePhotosAlbum']) {
									that.isAuth()
								}
							},
						});
					}
				})
				// #endif
			},
			/**
			 * 下载资源，保存图片到系统相册
			 */
			downLoadImg() {
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({
					url: app.globalData.downLoadUrl,
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "失败啦",
							icon: "none"
						});
					}
				})
			},
			/*
			 * 引导用户开启权限
			 */
			isAuth() {
				uni.showModal({
					content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (result) => {
									console.log(result.authSetting);
								}
							});
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	#qrbox {
		// width: 600rpx;
		// height: 600rpx;
		// margin: 0 auto;
	}

	.qr-box {
		// width: 600rpx;
		// height: 600rpx;
		// margin: 0 auto;
	}

	.wrap {
		// width: 100vw;
		// height: 100vh;
		// display: flex;
		// justify-content: center;
		// align-items: center;

		.content {
			// translate: 0 -50%;
		}
	}
</style>